<template>
  <div>
    <h1 class="mb-4 text-center text-danger">任务列表案例</h1>
    <div class="row align-items-center">
      <!-- 全选 -->
      <div class="col-auto">
        <div class="form-check">
          <input
            @change="$emit('changeAll', $event.target.checked)"
            :checked="checkedAll"
            class="form-check-input"
            type="checkbox"
            id="allCheck"
          />
          <label class="form-check-label" for="allCheck"> 全选 </label>
        </div>
      </div>

      <!-- 输入待办 -->
      <div class="col">
        <input
          @keyup.enter="$emit('add', $event.target.value), (text = '')"
          v-model="text"
          class="form-control"
          type="text"
          placeholder="请输入待办事项，按回车添加"
          aria-label="todo input"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["checkedAll"],
  data() {
    return { text: "" };
  },
  methods: {},

  computed: {},
};
</script>


<style>
</style>